<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web_gis</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #container {
        width: 100%;
        height: calc(100% - 30px);
    }
</style>

<body>
   <div style="height: 30px;">
    <button id="showTra" onclick="add()">显示实时路况</button>
    <button id="hiddenTra" onclick="remove()">隐藏实时路况</button>
    <button>标记地点</button>
   </div>
    <div id="container"></div>
</body>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '856484c67c95093725c30f30aced9e51',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7c31498f0ba54f48827dc63d31c1ffc3"></script>
<script type="text/javascript">
    // 地图初始化应该在地图容器div已经添加到DOM树之后
    var map = new AMap.Map('container')

    const infoWindow = new AMap.InfoWindow({
        isCustom: true,  // 使用自定义窗体
        content: '<div>HELLO,AMAP!</div>', // 信息窗体的内容可以是任意 html 片段
        offset: new AMap.Pixel(16, -45)
    });
    const onMarkerClick = function (e) {
        infoWindow.open(map, e.target.getPosition()); // 打开信息窗体
        // e.target 就是被点击的 Marker
    }

    const marker = new AMap.Marker({
        position: [116.481181, 39.989792]
    })
    map.add(marker);
    marker.on('click', onMarkerClick); // 绑定 click 事件
    init(map, AMap)
    var traffice = new AMap.TileLayer.Traffic({
        autoRefresh: true,
        interval: 180
    })
    function init(map, AMap) {
        const marker = new AMap.Marker({
            position: [116.39, 39.9] //位置
        })
        map.add(marker); //添加到地图
    }
    function add(){
        map.add(traffice);
    }
    function remove(){
        map.remove(traffice);
    }
</script>



</html>